<% 
  use crate::utils::config;
  use crate::templates::components::PostgresLogo;
  use crate::components::Dropdown;
  use crate::models::Cluster;

  let standalone_dashboard = config::standalone_dashboard();

  let home_link = if standalone_dashboard {"/"} else {"/deployments"};
%>

  <div class="fixed-top-nav font-family-primary" data-controller="navigation-navbar-web-app">
    <nav class="navbar-web-app horizontal navbar-expand-lg" data-controller="search topnav-web-app">
      
      <div class="controls">
        <!-- Toggles items that come from left nav -->
        <button class="navbar-toggler collapsed top-nav-controls" type="button" data-bs-toggle="collapse" data-bs-target="#leftNavItems" aria-controls="LeftNavItems" aria-expanded="false" aria-label="Toggle navigation">

          <div class="mobile-left-nav-controls rounded-1 p-2 d-flex">
            <span class="icon-owl icomoon text-white mx-1"></span>
          </div>
        </button>

        <div class="web-app-left-nav-sized-container">
          <%+ PostgresLogo::new(home_link).hide_owl() %>
        </div>
  
        <!-- Button to toggle collapsed menu for less than lg screens -->
        <button class="navbar-toggler collapsed top-nav-controls" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <svg xmlns="http://www.w3.org/2000/svg" width="33" height="18" viewBox="0 0 33 18" fill="none">
            <line x1="8.04297" y1="17.25" x2="24.543" y2="17.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
            <line x1="5.04297" y1="9.25" x2="27.543" y2="9.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
            <line x1="1.04297" y1="1.25" x2="31.543" y2="1.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
        </button>
      </div>

      <!-- Top Nav menu items for all sized screens -->
      <div class="collapse navbar-collapse drawer-submenu-container" id="navbarSupportedContent">
        <!-- Main Menu -->
        <div class="nav-item w-100 d-flex flex-column flex-lg-row align-items-lg-center collapse collapse-horizontal horizontal-collapse show drawer-submenu">
          <ul class="navbar-nav flex-grow-1 ps-4 p-lg-0 d-none d-lg-block">
            <li class="nav-item d-flex align-items-center">
              <div class="deployment_controls">
                <%+ Dropdown::nav(deployment_controls.links) %>
              </div>
            </li>
          </ul>
          
          <!-- Main nav links for lg screens -->
          <ul class="navbar-nav gap-3 mb-0 d-none d-lg-flex">
            <li class="align-items-center d-none d-lg-flex">
              <button type="text" class="btn nav-link btn-search-input-webapp border-0 p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
                <span class="material-symbols-outlined">search</span>
              </button>
            </li>
  
            <li class="nav-item d-flex align-items-center">
              <a class="nav-link p-lg-0" href="/docs">Docs</a>
            </li>

            <li class="nav-item d-flex align-items-center">
              <a class="nav-link p-lg-0" href="/blog">Blog</a>
            </li>

            <% if !standalone_dashboard { %>
            <li class="nav-item d-flex align-items-center">
              <a class="nav-link p-lg-0" href="/support">Support</a>
            </li>
            <% } %>

            <!-- coming back to feedback -->
            <!-- <li class="d-none d-lg-flex nav-item align-items-center">
              <a class="nav-link p-lg-0" href="/support">Feedback lgscb</a>
            </li> -->
          </ul>

          <!-- Main nav links for less than lg screens -->
          <ul class="sub-menu-dropdown mb-2 d-lg-none d-flex flex-column gap-3">
            <li class="nav-item d-flex align-items-center">
              <button type="text" class="btn-search d-flex justify-content-between w-100 mx-4 mb-2" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
                Search
                <span class="material-symbols-outlined">
                  search
                </span>
              </button>
            </li>

            <li class="menu-item rounded-0 d-flex align-items-center">
              <a class="ps-4" href="/docs">Docs</a>
            </li>

            <li class="menu-item rounded-0 d-flex align-items-center">
              <a class="ps-4" href="/blog">Blog</a>
            </li>

            <% if !standalone_dashboard { %>
            <li class="menu-item rounded-0 d-flex align-items-center">
              <a class="ps-4" href="/support">Support</a>
            </li>
            <% } %>
  
            <!-- coming back to feedback -->
            <!-- <% if !standalone_dashboard { %>
            <li class="menu-item rounded-0 d-flex align-items-center">
              <a class="ps-4" href="#" data-bs-toggle="collapse" data-bs-target=".horizontal-collapse">Feedback</a>
            </li>
            <% } %> -->
          </ul>
        </div>

        <!-- Feedback popup for less than lg screens -->
        <div class="nav-item collapse-horizontal horizontal-collapse collapse drawer-submenu">
          <ul class="sub-menu-dropdown mb-2">
            <a class="btn btn-tertiary-web-app ms-4" data-bs-toggle="collapse" data-bs-target=".horizontal-collapse">
              <span class="material-symbols-outlined icon-back-btn">
                chevron_left
              </span>
              Back
            </a>
            Feedback form will go here for mobile
          </ul>
        </div>
      </div>

      <!-- Left Nav menu for less than large screens -->
      <div class="d-lg-none">
        <div class="collapse navbar-collapse" id="leftNavItems">
          <div class="nav-item w-100 d-flex flex-column flex-lg-row collapse show drawer-submenu">
            <ul class="sub-menu-dropdown mb-2 d-lg-none d-flex flex-column gap-3">
              <% if cluster.id != Cluster::default().id { %>
              <li>
                <div class="px-4 d-flex flex-column">
                  <%+ cluster.tier.unwrap_or_default() %>
                  <div class="d-flex flex-row justify-content-between align-items-end text-break gap-2">
                    <span class="text-wrap"><%- cluster.name %></span>
                    <%+ cluster.status.unwrap_or_default() %>
                  </div>
                </div>
              </li>
              <% } %>
              <% for link in links { %>
                <% if link.name.to_lowercase() == "home" {%>
                <li class="menu-item d-flex mobile-dashboard-button mx-4 rounded-1">
                  <a 
                    class="py-2 text-white w-100 text-center d-flex gap-2 ps-4 justify-content-center <% if link.disabled  { %> disabled <% } %> <% if link.active { %> active <% } %>"
                    href="<% if !link.disabled { %> <%= link.href %> <% } %>">
                    <span class="icon-owl icomoon" style="line-height: unset;"></span>
                    <%= link.name %>
                  </a>
                </li>
                <% } else {%>
                <li class="menu-item rounded-0 d-flex align-items-center">
                  <a
                    class="<% if link.disabled  { %> disabled <% } %> <% if link.active { %> active <% } %> d-flex gap-2 ps-4"
                    href="<% if !link.disabled { %> <%= link.href %> <% } %>">
                    <% if link.icon.as_ref().is_some() { %>
                    <span class="material-symbols-outlined %>"><%- link.icon.unwrap() %></span>
                    <% } %>
                    <span><%= link.name %></span>
                  </a>
                </li>
                <% } %>
              <% } %>
            </ul>
          </div>
        </div>
      </div>

    </nav>
  </div>

  <% include!("../../../../../templates/components/search_modal.html");%>
